<template>
  <div v-if="isVisible" :class="classObject" class="message-info">
    <span>{{ message }}</span>
    <IconButton :icon="ICONS.CLOSE" color="grey" @click="hide"></IconButton>
  </div>
</template>

<script setup lang="ts">
import { ref, type PropType } from "vue";
import type { MessageType } from "../types";
import IconButton from "./IconButton.vue";
import { ICONS } from "../assets/icons";

const props = defineProps({
  message: String,
  type: {
    type: String as PropType<MessageType>,
    default: "default",
  },
});
const emit = defineEmits(["close-message"]);

const isVisible = ref(true);
const classObject = {
  "alert-success": props.type === "success",
  "alert-danger": props.type === "error",
  "alert-primary": props.type === "default",
};

const hide = () => {
  isVisible.value = false;
  emit("close-message", true);
};
</script>

<style scoped>
.message-info {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  width: 500px;
  padding: 16px;
  border-radius: 4px;

  &.alert-success {
    border: 1px solid #a3cfbb;
    background: #d1e7dd;
    color: #0a3622;
  }
  &.alert-danger {
    border: 1px solid #f1aeb5;
    background: #f8d7da;
    color: #58151c;
  }
  &.alert-primary {
    border: 1px solid #9ec5fe;
    background: #cfe2ff;
    color: #052c65;
  }

  .icon-button {
    padding: 0;
  }
}
</style>
